<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-sm" id="addProgress">+ 添加进度</button>
                </div>
            </div>
        </div>
        
        <div id="progressList" style="padding:15px;">
            <!-- 卡片内容将通过JS动态加载 -->
        </div>
    </div>
</div>

<script>
function progressInit() {
    if($('#caseTab').find('li').eq(2).data('load') == 'true'){
        return false;
    }
    $('#caseTab').find('li').eq(2).data('load','true');
    
    var caseId = case_id;
    
    layui.use(moduleInit, function(){
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var laydate = layui.laydate;
        var tool = layui.tool;
        
        // 加载进度列表
        window.loadProgressList = function() {
            // 确保函数在全局可访问
            $.ajax({
                url: '{:url("lawcase/api/get_progress_list")}',
                type: 'get',
                data: {case_id: caseId},
                success: function(res) {
                    if(res.code === 0) {
                        var html = '';
                        if(res.data.length === 0) {
                            html += '<div class="layui-card">';
                            html += '    <div class="layui-card-header">暂无进度记录</div>';
                            html += '    <div class="layui-card-body">暂无数据</div>';
                            html += '</div>';
                        } else {
                            // 按事件日期降序排序
                            res.data.sort(function(a, b) {
                                return new Date(b.event_time) - new Date(a.event_time);
                            });
                            
                            $.each(res.data, function(index, item) {
                                html += '<div class="layui-card" style="margin-bottom:15px;">';
                                html += '    <div class="layui-card-header" style="display:flex;align-items:center;gap:10px;">';
                                html += '        <span style="font-size:14px;">' + item.event_time + '</span>';
                                html += '        <span style="font-size:16px;font-weight:bold;">' + item.event_type + '</span>';
                                html += '    </div>';
                                html += '    <div class="layui-card-body">';
                                html += '        <div style="margin-bottom:15px;font-size:14px;line-height:1.6;">' + item.content + '</div>';
                                // 转换创建时间为标准格式
                                var createTime = item.create_time ? new Date(item.create_time * 1000).toLocaleString() : '';
                                html += '        <span style="font-size:12px;color:#999;">创建时间: ' + createTime + '</span>';
                                html += '        <div style="text-align:right;">';
                                html += '            <button class="layui-btn layui-btn-xs layui-btn-danger" onclick="deleteProgress(' + item.id + ')">删除</button>';
                                html += '        </div>';
                                html += '    </div>';
                                html += '</div>';
                            });
                        }
                        $('#progressList').html(html);
                    } else {
                        layer.msg(res.msg);
                    }
                }
            });
        }
        
        // 添加进度
        $('#addProgress').on('click', function() {
            tool.side('{:url("lawcase/progress/add")}?case_id=' + caseId, '添加案件进度');
        });
        
        // 删除进度
        window.deleteProgress = function(id) {
            layer.confirm('确定要删除该进度记录吗？', function(index) {
                $.ajax({
                    url: '{:url("lawcase/progress/delete")}',
                    type: 'post',
                    data: {id: id},
                    success: function(res) {
                        layer.msg(res.msg);
                        if(res.code === 0) {
                            loadProgressList();
                        }
                    }
                });
                layer.close(index);
            });
        }
        
        // 初始化加载
        loadProgressList();
    });
}

</script>